<template>
  <div>
    <t-sticky>
      <t-navbar
        title="意见反馈"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="warpper">
      <div class="head-tip">* 为更好地解决您的问题，请选择问题分类</div>
      <div class="type-box">
        <div
          v-for="(item, index) in typeList"
          :key="index"
          class="type-item"
          @click="onSelectType(item)"
        >
          <div
            :class="`type ${formData.categoryId == item.id ? 'active' : ''}`"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="desc-box">
        <t-textarea
          bordered
          class="textarea-example"
          placeholder="为了更好解决问题和进步，请详细描述问题（必填）"
          v-model="formData.content"
        ></t-textarea>
      </div>
      <div class="upload-box">
        <t-upload
          multiple
          :autoUpload="false"
          accept="image/*"
          :max="3"
          :grid-config="gridConfig"
          action="/"
          :beforeUpload="onBeforeImg"
          :onRemove="onRemoveImg"
        >
        </t-upload>
        <div class="upload-desc">最多3张(选填)</div>
      </div>
      <div class="info-box">
        <div class="info-tit">联系方式（选填）</div>
        <div class="input-box">
          <t-input
            class="input"
            placeholder="请输入手机号码、QQ号或邮箱"
            borderless
            v-model="formData.contactInfo"
          />
        </div>
      </div>
      <div class="info-box">
        <div class="info-tit">官方客服微信：</div>
        <div class="input-box">
          <span class="num">12345678912</span>
          <span class="time">(周一到周五 10:00-19:00)</span>
        </div>
      </div>
    </div>
    <div class="fixed-box">
      <div
        :class="`btn ${formData.categoryId && formData.content ? 'isuse' : ''}`"
        @click="onSubmit"
      >
        提交
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, onMounted } from "vue";
import myApi from "@/api/myApi";
import { useRouter } from "vue-router";
import { Toast } from "tdesign-mobile-vue";
const router = useRouter();
const gridConfig = {
  column: 4,
};
const state = reactive({
  typeList: [],
  actTypeIndex: null,
  imgList: [],
  formData: {
    categoryId: "",
    contactInfo: "",
    content: "",
    imageUrl: "",
  },
});
const { descTxt, typeList, actTypeIndex, formData } = toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 选择反馈类型
function onSelectType(data) {
  state.formData.categoryId = data.id;
}
// 获取类型列表
async function getList() {
  const result = await myApi.getOpinionType({
    pageSize: 1,
    pageNum: 100,
  });
  console.log("result", result);
  state.typeList = result.data;
}
// 选择图片
async function onBeforeImg(e) {
  if (e.size > 1024 * 300) {
    return Toast("请选择小于300k的图片");
  }
  var formdata = new FormData();
  const data = await myApi.imgUpload({ file: e.raw });
  state.imgList.push({
    id: e.lastModified,
    url: data.data,
  });
}
// 移除图片
function onRemoveImg(e) {
  state.imgList = state.imgList.filter(
    (item) => item.id !== e.file.lastModified
  );
}
// 提交反馈
async function onSubmit() {
  if (!state.formData.categoryId && !state.formData.contactInfo) {
    return;
  }
  if (state.imgList.length > 0) {
    state.imgList.map((item) => {
      state.formData.imageUrl = state.formData.imageUrl
        ? state.formData.imageUrl + "," + item.url
        : item.url;
    });
  }
  const data = await myApi.createOpinion(state.formData);
  console.log("d", data);
  if (data.code == 0) {
    Toast("反馈成功");
    setTimeout(() => {
      router.back();
    }, 1000);
  } else {
    Toast(data.msg);
  }
}
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
:deep(.t-textarea) {
  min-height: 100px;
}
:deep(.t-input__content) {
  font-size: 14px;
}
:deep(.t-upload) {
  padding-left: 0;
}
:deep(.t-textarea__wrapper-inner) {
  color: $b10-color;
  --td-textarea-placeholder-color: #999;
}
.warpper {
  border-top: 1px solid $be9-color;
  padding: 15px 10px;
  .head-tip {
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    color: $b10-color;
    padding: 10px;
    padding-bottom: 0;
    text-align: left;
  }
  .type-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    .type-item {
      width: 33.3%;
      padding: 10px;
      box-sizing: border-box;
      .type {
        border: 1px solid $be9-color;
        color: $b6c-color;
        font-size: 14px;
        font-style: normal;
        font-weight: 550;
        padding: 8px 0;
        text-align: center;
        border-radius: 6px;
        &.active {
          border: 1px solid $bff844b-color;
          color: $bff844b-color;
        }
      }
    }
  }
  .desc-box {
    padding: 0 10px;
  }
  .upload-box {
    padding: 0 10px;
    .upload-desc {
      color: #b9b9b9;
      font-size: 12px;
      font-style: normal;
      font-weight: 550;
    }
  }
  .info-box {
    padding: 15px 10px;
    padding-bottom: 0;
    text-align: left;
    .info-tit {
      font-size: 14px;
      font-style: normal;
      font-weight: 550;
      color: $b10-color;
    }
    .input-box {
      padding: 10px 0;
    }
    .input {
      border: 1px solid $be9-color;
      padding: 7px;
      border-radius: 6px;
      font-size: 14px;
      color: #333;
    }
    .num {
      color: #6c6c6c;
      font-size: 15px;
      font-style: normal;
      font-weight: 750;
    }
    .time {
      color: #999;
      font-size: 14px;
      font-style: normal;
      font-weight: 550;
    }
  }
}
.fixed-box {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background-color: $bf5-color;
  padding-top: 30px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    width: 300px;
    height: 46px;
    line-height: 46px;
    background-color: #e6e6e6;
    color: #6c6c6c;
    font-size: 16px;
    font-style: normal;
    font-weight: 750;
    border-radius: 50px;
    &.isuse {
      background: linear-gradient(90deg, #fdda28 0%, #f1b444 100%);
      color: $b10-color;
    }
  }
}
</style>
